<template>
    <el-row :gutter="10" class="groupItemWrap">
        <el-col :span="3">
            <div class="grid-content bg-purple text-center">
                <img :src="item.product_mphoto_url ? item.product_mphoto_url : getEmptyImg() " class="avatar"   height="80" >
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <el-select v-model="item.product_id" filterable :placeholder="$t('placeholder.select')" style="width: 120px;" size="mini" @change="changeProduct($event)">
                    <el-option
                    v-for="option in productList"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id">
                    </el-option>
                </el-select>
            </div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple">
                {{item.product_scode ? item.product_scode : '--'}}
            </div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple">
                <el-checkbox v-model="item.is_optional" >{{item.is_optional ? 'true' : 'false'}}</el-checkbox>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple">
                <el-select v-model="item.dqty"  class="filter-item" style="width: 60px;" size="mini" @change="changeQty">
                    <el-option v-for="(option, index) in dQuantOptions" :key="index" :label="option" :value="option" />
                </el-select>
            </div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple">
                <el-select v-model="item.mqty"  class="filter-item" style="width: 60px;" size="mini" @change="changeQty">
                    <el-option v-for="(option, index) in quantOptions" :key="index" :label="option" :value="option" />
                </el-select>
            </div>
        </el-col>
        <el-col :span="2">
            <div class="grid-content bg-purple">
                <el-button style="font-size:20px;" type="text" @click="removeProduct()" class="el-icon-delete" ></el-button>
            </div>
        </el-col>
    </el-row>
</template>
<script>
export default {
    props: {
        itemObj: {
            type: Object,
            default () {
                return {
                    dqty: 1
                }
            }
        },
        isCustom: String,
        idx: Number,
        productList: Array
    },
    data () {
        return {
            dQuantOptions: [1, 2, 3],
            quantOptions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            item: {
                product_name: '',
                product_scode: '',
                product_lang: '',
                product_id: '',
                product_mphoto: '',
                product_mphoto_url: '',
                dqty: 1,
                mqty: 1
            },
            groups: this.groupData
        }
    },
    created () {
        /* let num = []
        if (this.item.mqty) {
            for (let i = 0; i < this.item.mqty + 1; i++) {
                num.push(i)
            }
            this.quantOptions = num
        } */
        if (this.isCustom === '1') {
            this.dQuantOptions = [0, 1, 2, 3]
            this.item.dqty = 0
        }
    },
    mounted () {
        this.item = JSON.parse(JSON.stringify(this.itemObj))
    },
    watch: {
        itemObj: function (val) {
            this.item = JSON.parse(JSON.stringify(val))
        }
    },
    methods: {
        getEmptyImg () {
            return require('../../assets/empty01.jpg')
        },
        changeProduct (id) {
            let val ={}
            for (let i=0; i<this.productList.length; i++) {
                if(this.productList[i].id === id) {
                    val = JSON.parse(JSON.stringify(this.productList[i]))
                }
            }
            let data = {}
            data.product_name = val.name
            data.product_scode = val.scode
            data.product_lang = val.lang
            data.product_id = val.id
            data.product_mphoto = val.mphoto
            data.product_mphoto_url = val.mphoto_url,
            data.dqty = 1
            data.mqty = 1
            if (this.isCustom === '1') {
                data.dqty = 0
            }
            this.item = data
            this.$emit('change-product', data, this.idx)
        },
        changeQty () {
            //this.$emit('ret-group', this.productData, this.idx)
            //this.groups.product[this.idx] = this.productData
            // console.log(this.item)
            console.log(this.idx)
            this.$emit('change-product', this.item, this.idx)
        },
        removeProduct() {
            this.$emit('remove-product', this.idx)
        },
    }
}
</script>
